<template>
    <div v-if="showLogin" class="login-modal">
        <div class="main">
            <login
                v-if="type == 'login'"
                @changePage="fnChangePage"
                @govip="fnGoVip()"
                @success="fnSuccess()"
                @close="fnCancel"
            />
            <reg
                v-else-if="type == 'reg'"
                @changePage="fnChangePage"
                @govip="fnGoVip()"
                @success="fnSuccess()"
                @close="fnCancel"
            />
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import login from './login'
import reg from './reg'
import { checkProduct } from '@/assets/js/utils'
export default {
    components: { login, reg },
    data() {
        return {}
    },
    computed: {
        ...mapState({
            showLogin: (state) => state.isLogin.showLogin,
            type: (state) => state.isLogin.loginType,
            dist: (state) => state.isLogin.dist
        })
    },
    methods: {
        fnGoVip() {
            this.$store.commit('isLogin/HIDE_LOGIN')
            this.$router.push('/home')
        },
        fnChangePage(type) {
            this.$store.commit('isLogin/SHOW_LOGIN', { type })
        },
        fnCancel() {
            this.$store.commit('isLogin/HIDE_LOGIN')
        },
        fnSuccess() {
            const isProduct = checkProduct()
            let dist = this.dist ? this.dist : ''
            const ticket = this.$getSessionTicket()

            if (dist) {
                if (dist.indexOf('?') > 0) {
                    dist += '&session_ticket=' + ticket
                }
                location.href = dist
            } else {
                location.href = isProduct
                    ? '//cms.zsdx.cn?session_ticket=' + ticket
                    : '//gt.wxhand.com?session_ticket=' + ticket
            }
        }
    }
}
</script>

<style lang="less" scoped>
.login-modal {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2001;
}
.main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.close-btn {
    position: absolute;
    width: 26px;
    height: 26px;
    right: -13px;
    top: -13px;
    font-size: 26px;
    color: rgba(255, 255, 255, 0.8);
}
</style>
<style lang="less">
.with-btn {
    .btn-vip {
        width: 320px;
        height: 50px;
        position: absolute;
        top: 550px;
        left: 70px;
        border-radius: 30px;
        cursor: pointer;
    }
}
</style>
